<template>
  <Marker />
  <button @click="updateLocation">改变location</button>
</template>

<script>
import Marker from "../common/Marker.vue";
import { provide, ref, reactive, readonly } from "vue";
export default {
  components: {
    Marker,
  },
  setup() {
    const location = ref("山西");
    const geolocation = reactive({ longitude: 60, latitude: 120 });
    const updateLocation = () => {
      location.value = location.value + "2";
    };
    const updateGeolocation = () => {
      geolocation.longitude++;
    };
    // provide("location", location);
    provide("location", readonly(location)); // 没有发现readonly的作用
    provide("geolocation", readonly(geolocation));
    provide("updateLocation", updateLocation);
    provide("updateGeolocation", updateGeolocation);
    return {
      location,
    };
  },
  methods: {
    updateLocation() {
      this.location = this.location + "1";
    },
  },
};
</script>

<style>
</style>